@extends('layouts.header')
@section('content')
    <article class="page-container">
        <div class="cl pd-5 bg-1 bk-gray ">
            <form class="form form-horizontal" id="search_form">
                <div class="row cl">
                    <label class="form-label col-sm-3">工器具类型：</label>
                    <div class="formControls col-sm-7">
                        <select class="select2 input-text" name="tool_name">
                            <option value="">--请选择--</option>
                            @foreach($tools as $name)
                                <option value="{{$name}}">{{$name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </form>
        </div>
        <div class="cl bg-1 bk-gray mt-5">
            <span class="l" >
                对选中部分填充价格： <input id="addMoney" class="input-text" style="width: 200px;" type="text" placeholder="回车同步到表格">元
            </span>
            <b class="btn btn-primary radius r" id="saveTb">保存选中项</b>
        </div>
        <div class="mt-15">
            <table class="table table-border table-bordered table-hover table-bg table-responsive table-condensed" id="datatable">
                <thead>
                    <tr class="text-c">
                        <th><input type="checkbox" name="" id="checkAll"></th>
                        <th class="tool_name">工器具名称</th>
                        <th>检测标准</th>
                        <th>试验项目</th>
                        <th>额定电压/分类</th>
                        <th>单价（元）<br><span class="c-red">回车保存</span> </th>
                        <th>备注<br><span class="c-red">回车保存</span></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($data as $val)
                        <tr class="text-c" >
                            <input type="hidden" name="tool_id" value="{{data_get($val,'tool_id',0)}}"> 
                            <input type="hidden" name="std_id" value="{{data_get($val,'std_id',0)}}"> 
                            <input type="hidden" name="vol_class_id" value="{{data_get($val,'vol_class_id',0)}}"> 
                            <input type="hidden" name="item_id" value="{{data_get($val,'item_id',0)}}"> 
                            <td class="input_checkbox"><input type="checkbox" name="id" value="{{$val->money_id}}"></td> <!-- 如果money_id是0，则添加，否则是修改 -->
                            <td>{{ $val->tool_name}}</td>
                            <td>{{ $val->std_num}}</td>
                            <td>{{ $val->item_name}}</td>
                            <td>{{ $val->vol_class_val}}</td>
                            <td><input class="input-text" type="text" name="val" value="{{$val->val}}" /></td>  
                            <td> <input class="input-text" type="text" name="remark" value="{{$val->remark}}" /> </td>
                        </tr>
                    @endforeach
                </tbody>
                @csrf
            </table>
        </div>
    </article>
    <script type="text/javascript">
        var table;
        $(function(){
            table = $('#datatable').DataTable({
                // bStateSave:true,
            });
            // $('#saveTb').trigger('click'); //测试
        })
        const getCheckedInput = function () {
            let checkedInput = $('input:checkbox:checked','tbody');
            if (checkedInput.length == 0) {
                layer.msg('请先选中要操作的行！');
                return false;
            }
            return checkedInput;
        }
        //保存表格
        $('#saveTb').on('click',function(){
            let checkedInput = getCheckedInput();
            if(checkedInput == false) return;
            var data = {data:{}};
            $(checkedInput).each(function(i){
                data.data[i] = {};
                $(this).closest('tr').find('input').each(function () {
                    data.data[i][$(this).attr('name')] = $(this).val();
                })
            })
            ajax('post','edit',data,function(count){
                if (count > 0) {
                    layer.confirm('保存成功',{btn:['刷新','取消']},function () {
                        location.reload();
                    });
                }
            });
        })
        $('#search_form').on('change',function () {
            let formData = $(this).serializeArray();
            for(let i in formData){
                let name = formData[i].name,
                    value = formData[i].value,
                    index = $('thead tr th.'+name,'#datatable').index();
                table.column(index).search('^'+value+'$',true,false).draw();
            }
        })
        $('input','tbody').on('keyup',function(e) {
            var obj = $(this);
            $(obj).closest('tr').find('input:checkbox').prop('checked','checked');
            if (e.which == 13) {
                let data = {};
                $(obj).closest('tr').find('input').each(function(){
                    data[$(this).attr('name')] = $(this).val();
                })
                ajax('post','edit',data,function(res){
                    if (res > 0 && data.id == 0) {
                        $(obj).closest('tr').find('input[name=id]').val(res);
                    }
                });
            }
        })
        $('#addMoney').on('keypress',function (e) {
            if (e.which == 13) {
                let checkedInput = getCheckedInput();
                if(checkedInput == false) return;
                let val = $(this).val();
                $(checkedInput).each(function(){
                    $(this).closest('tr').find('input[name=val]').val(val);
                    console.log($(this).closest('tr').find('input[name=val]').val());
                })
            }
        })
        $('td.input_checkbox').on('click',function () {
            let inputCheckbox = $(this).find('input:checkbox');
            $(inputCheckbox).prop('checked',!$(inputCheckbox).prop('checked'));
        })
    </script>
@endsection


